<template>
    <div class="list-box" id="order-list">
        <div class="open-order-list">
            <el-button type="primary" :class="orderData.isShowOrder?'el-icon-d-arrow-right open-order-list-button':'el-icon-d-arrow-left open-order-list-button'" @click="orderData.isShowOrder = !orderData.isShowOrder"></el-button>
        </div>
        <h4 class="list-title">
            <i class="el-icon-refresh list-fresh" @click="refresh"></i>
            <span>运单</span>
            <div class="list-text">
                <el-checkbox v-model="allChecked">全选</el-checkbox>
            </div>
        </h4>
        <div class="search-div">
            <el-input placeholder="请输入识别码查找运单" v-model="orderData.searchInput" class="input-with-select">
                <i class="el-icon-close"
                   style="font-size: 22px;position: relative;top: 10px;"
                   slot="suffix"
                   @click="orderData.searchInput = ''"
                   v-if="orderData.searchInput !== ''">
                </i>
            </el-input>
        </div>
        <div style="padding-bottom: 10px">
            <div v-for="(item,index) in orderData.orderNav" >
                <div style="float: left;position: relative">
                    <el-radio v-model="orderData.wayBillType" :label="item.type" border style="margin:12px 0 0 12px">{{item.name}}</el-radio>
                    <el-badge :value="item.count" :max = maxIcon  style="position: absolute;right: -4px;top: 8px;" v-if="item.count !== 0"></el-badge>
                </div>
            </div>
        </div>
        <ul class="list-content">
            <li v-for="(data,index) in orderData.orderForMap" @click="checkItem(data.id)" :key="data.id" :class="{high:data.checked}">
                <div class="check-trig"></div>
                <p class="field-details_tou">
                    <el-checkbox v-model="data.checked"></el-checkbox>
                    <span class="field-details_ddid">{{data.full_dingdong}}.</span>
                    <span>{{data.dispatch_status_link}}</span>
                </p>
                <p><span class="clock"></span>{{data.forecast_pickup_time}} - 22:00</p>
                <p><span class="send"></span><span class="field-details_send">S.</span>{{data.pick_name}}
                    <!--/<span class="mobile">{{data.pick_phone}}</span></p>-->
                <p><span class="get"></span><span class="field-details_rec">H.</span>{{data.delivery_name}}
                    <!--/<span class="mobile">{{data.delivery_phone}}</span></p>-->
                <p class="address"><span class="local"></span>{{data.delivery_address}}</p>
                <p style="text-align: center;position: relative;z-index: 10">
                    <el-button size="mini" @click.stop="send(data.id)" style="margin: 0 auto">详情</el-button>
                </p>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: '',
                searchStr: "",
                wayBillType: null,
                baseMapData: [], // 初始化存储的订单数据
                showOrderList: true,
                allChecked: false,  // 全选
                maxIcon: 99,
                timer: null,
                menu: [],
                times: null,
                //重构参数
                orderData: {},  // 传入的参数
                orderList: []  // 订单列表数据
            };
        },
        props: {
            value: {
                type: Object
            }
        },
        computed: {
            isShowOrder: function (val) {
                return this.orderData.isShowOrder;
            }
        },
        watch: {
            isShowOrder: function (val) {
                let list = document.getElementById('order-list');
                if (val) {
                    list.style.right = '0px';
                } else {
                    list.style.right = '-240px';
                }
            },
            value: {
                handler(val) {
                    this.orderData = this.value;
                },
                deep: true
            },
            orderData: {
                handler(val) {
                    this.$emit('input', this.orderData);
                },
                deep: true
            },
            allChecked: function (val) {
                if (val) {
                    this.orderData.orderForMap.forEach(item => {
                        if (!item.checked) {
                            this.checkItem(item.id);
                        }
                    })
                } else {
                    this.orderData.orderForMap.forEach(item => {
                        if (item.checked) {
                            this.checkItem(item.id);
                        }
                    })
                }
            }
        },
        methods: {
            checkItem(id) {
                this.$emit("checkItem", id, false)
            },
            send(orderId) {
                this.$emit('openOrderDialog', orderId);
            },
            refresh() {
                this.$emit("refresh");
            }
        }
    };
</script>
<style lang="less">
    .list-box{
        .el-radio__inner{
            display: none !important;

        }
        .el-input__inner{
            border: none !important;
        }
        .el-radio.is-bordered{
            padding:6px 10px 0 0px !important;
            height: 26px  !important;
        }
    }

</style>
<style scoped lang='less'>
    .list-box {
        right: -240px;
        transition: 0.5s all linear;
        .search-div {
            border-bottom: 1px solid #eee;
        }
        .btns-div {
            font-size: 14px;
            color: #303133;
            letter-spacing: 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            /*overflow: hidden;*/
            /*height: 60px;*/
            padding: 14px 0 10px;
            position: relative;
            /*overflow-x: scroll;*/
            background-color: #fff;
            /*.item{*/
            /*width: 60px;*/
            /*}*/
            .btns-div-content {
                display: flex;
                justify-content: space-around;
            }

            .inline-span {
                flex: 1;
                display: flex;
                width: 60px;
                position: relative;
                align-items: center;
                justify-content: center;
                .bg {
                    position: absolute;
                    z-index: 2;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                }
            }
            .check-type {
                color: #1989FA;
            }

        }

        .list-content {
            li {
                height: auto;
                .address {
                }
                p {
                    color: #000;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    .mobile {
                        color: #676767;
                    }
                    .send, .get, .local, .clock {
                        flex: 0 0 16px;
                        font-size: 12px;
                        color: #FFFFFF;
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        text-align: center;
                        border-radius: 8px;
                        display: block;
                        margin-right: 6px;
                    }
                    .clock, .local {
                        background-color: #9b9b9b;
                        color: #fff;
                    }
                    .clock {
                        background: url(../../../../../assets/img/shijian@2x.png) no-repeat;
                        background-size: contain;
                    }
                    .local {
                        margin-top: 2px;
                        background: url(../../../../../assets/img/dingwei@2x.png) no-repeat;
                        background-size: contain;
                    }
                    .get {
                        background: url(../../../../../assets/img/shoujianren@2x.png) no-repeat;
                        background-size: contain;
                    }
                    .send {
                        background: url(../../../../../assets/img/jijianren@2x.png) no-repeat;
                        background-size: contain;
                    }
                }
                p:last-child {
                    align-items: self-start;
                    height: auto;
                    margin-bottom: 0;
                }
            }
        }
    }

    ::-webkit-scrollbar {
        width: 1px;
    }
</style>

